<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2017/11/28
  Time: 16:32
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <script>var staticUrl="http://192.168.0.24";//请求地址路路径</script>
    <%@ include file="../include/head.jsp"%>
    <title></title>

    <style>
        html,
        body {
            background-color: #efeff4;
        }
        .mui-bar~.mui-content .mui-fullscreen {
            top: 44px;
            height: auto;
        }
        .mui-pull-top-tips {
            position: absolute;
            top: -20px;
            left: 50%;
            margin-left: -25px;
            width: 40px;
            height: 40px;
            border-radius: 100%;
            z-index: 1;
        }
        .mui-bar~.mui-pull-top-tips {
            top: 24px;
        }
        .mui-pull-top-wrapper {
            width: 42px;
            height: 42px;
            display: block;
            text-align: center;
            background-color: #efeff4;
            border: 1px solid #ddd;
            border-radius: 25px;
            background-clip: padding-box;
            box-shadow: 0 4px 10px #bbb;
            overflow: hidden;
        }
        .mui-pull-top-tips.mui-transitioning {
            -webkit-transition-duration: 200ms;
            transition-duration: 200ms;
        }
        .mui-pull-top-tips .mui-pull-loading {
            /*-webkit-backface-visibility: hidden;
            -webkit-transition-duration: 400ms;
            transition-duration: 400ms;*/

            margin: 0;
        }
        .mui-pull-top-wrapper .mui-icon,
        .mui-pull-top-wrapper .mui-spinner {
            margin-top: 7px;
        }
        .mui-pull-top-wrapper .mui-icon.mui-reverse {
            /*-webkit-transform: rotate(180deg) translateZ(0);*/
        }
        .mui-pull-bottom-tips {
            text-align: center;
            background-color: #efeff4;
            font-size: 15px;
            line-height: 40px;
            color: #777;
        }
        .mui-pull-top-canvas {
            overflow: hidden;
            background-color: #fafafa;
            border-radius: 40px;
            box-shadow: 0 4px 10px #bbb;
            width: 40px;
            height: 40px;
            margin: 0 auto;
        }
        .mui-pull-top-canvas canvas {
            width: 40px;
        }
        .mui-slider-indicator.mui-segmented-control {
            background-color: #efeff4;
        }
        .mui-control-content .mui-loading {
            margin-top: 50px;
        }
    </style>
    <script src="../../static/js/mui.pullToRefresh.js"></script>
    <script src="../../static/js/mui.pullToRefresh.material.js"></script>
    <script>
        mui.init();
    </script>
    <script src="../../static/js/paginationRequest.js"></script>
</head>

<body>

<header class="mui-bar mui-bar-nav qy-bg-success">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left qy-text-white"></a>
    <h1 class="mui-title qy-headerInputBox">
        <input type="text" id="" value="" class="qy-headerInput"/>
    </h1>
    <a class="mui-icon mui-pull-right qy-position-relative">
        <img src="../../static/imgs/shoppingCarLogo-white.png" class="qy-shopcarIcon"/>
        <span class="shoppingCarLabel">1</span>
    </a>
</header>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <div class="mui-scroll">
                <a class="mui-control-item mui-active" href="#item1mobile">
                    推荐
                </a>
                <a class="mui-control-item" href="#item2mobile">
                    热点
                </a>
                <a class="mui-control-item" href="#item3mobile">
                    北京
                </a>
                <a class="mui-control-item" href="#item4mobile">
                    社会
                </a>
                <a class="mui-control-item" href="#item5mobile">
                    娱乐
                </a>
                <a class="mui-control-item" href="#item6mobile">
                    科技
                </a>
            </div>
        </div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox0">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" v-for="ele in cards">
                                第1个选项卡子项-{{ele.ordersNo}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox1">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" v-for="ele in cards">
                                第2个选项卡子项-{{ele.ordersNo}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox2">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" v-for="ele in cards">
                                第3个选项卡子项-{{ele.ordersNo}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item4mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox3">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" v-for="ele in cards">
                                第4个选项卡子项-{{ele.ordersNo}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item5mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox4">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" v-for="ele in cards">
                                第5个选项卡子项-{{ele.ordersNo}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div id="item6mobile" class="mui-slider-item mui-control-content">
                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll" id="vueListBox5">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell" v-for="ele in cards">
                                第6个选项卡子项-{{ele.ordersNo}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

</html>











